<template>
	<dropdownRefresh :isRefresh="isRefresh">
		<div class="swiper">
			<div class="swiper-wrapper"></div>
			<div class="swiper-pagination"></div>
		</div>
	</dropdownRefresh>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app'
import dropdownRefresh from '@/component/dropdownRefresh.vue'
const swiperRef = ref(null)
let isRefresh = ref(true)
let timer = null
// 初始化轮播
const initSwiper = () => {
	swiperRef.value = new Swiper('.swiper', {
		direction: 'vertical',
		virtual: {
			slides: (function () {
				var slides = []
				for (var i = 0; i < 600; i += 1) {
					slides.push('Slide ' + (i + 1))
				}
				return slides
			})()
		},
		on: {
			slideChange: function () {
				console.log(this.activeIndex)
				if (this.activeIndex === 0) {
					timer = null
					timer = setInterval(() => {
						isRefresh.value = true
						clearInterval(timer)
						timer = null
					}, 1000)
				} else {
					isRefresh.value = false
				}
				// activeIndex.value =  this.activeIndex
			}
		}
	})
}
onMounted(() => {
	initSwiper()
})
</script>
<style>
.swiper {
	width: 100vw;
	height: calc(100vh - 44px);
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

.append-buttons {
	text-align: center;
	margin-top: 20px;
}

.append-buttons a {
	display: inline-block;
	border: 1px solid #007aff;
	color: #007aff;
	text-decoration: none;
	padding: 4px 10px;
	border-radius: 4px;
	margin: 0 10px;
	font-size: 13px;
}
</style>
